import React from "react";
import { WeaInput, WeaLocaleProvider } from "ecCom";
import { Button, message } from 'antd';
import fillin from '../../../../../apis/fillin';

const { sendSms } = fillin;
const { error } = message;
const getLabel = WeaLocaleProvider.getLabel;

export default class VerifyCode extends React.Component {
    constructor() {
        super();

        this.state = {
            isSend: true,
            count: 60,
            isDisabled: true,
            isShowImageCode: false,
            isError: false
        };
    }

    componentDidMount() {
        const { imageMsg, value } = this.props;
        this.validate(value, imageMsg);
    }

    componentWillReceiveProps(nextProps) {
        const { imageMsg, value } = nextProps;
        const oldValue = this.props.value;
        const oldImageMsg = this.props.imageMsg;

        if (oldValue !== value || imageMsg.isImageCom !== oldImageMsg.isImageCom) this.validate(value, imageMsg);
    }

    validate = (value, imageMsg) => {
        const regExp = /^1\d{10}$/;

        if (regExp.test(value) && imageMsg.isImageCom) {
            this.setState({ isDisabled: false });
        } else {
            this.setState({ isDisabled: true });
        }
    }

    countDown = () => {
        let count = this.state.count;

        this.setState({
            isSend: false,
            isDisabled: true
        });

        let timer = setInterval(() => {
            this.setState({ count: --count }, () => {
                if (0 > count) {
                    clearInterval(timer);
                    this.setState({
                        isSend: true,
                        count: 60,
                        isDisabled: false
                    })
                }
            })
        }, 1000)
    }

    onCodeClick = () => {
        const { uuid, imageMsg, value, shortkey } = this.props;

        if (!this.state.isSend) return;

        this.countDown();
        sendSms({
            mobile: value,
            uuid,
            captcha: imageMsg.captcha,
            value: imageMsg.value,
            key: shortkey
        }).then( res => {
            const { code, msg } = res;
            if (!code) return;

            if (code === -1) {
                error(msg);
            }
        });
    }

    handleCodeMsgChange = (val) => {
        let { data } = this.props;
        data.codeValue = val;
    }

    render() {
        const { isSend, isDisabled } = this.state;

        return (
            <div className='verify-code'>
                <div className='verify-code-content'>
                    <WeaInput ecId={`${this && this.props && this.props.ecId || ''}_WeaInput@evd9vc`} className='verify-code-text' onBlur={this.handleCodeMsgChange} />
                    <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@6vwalt`}
                        type="primary"
                        className='verify-btn wea-edc-form-btn'
                        disabled={isDisabled}
                        onClick={this.onCodeClick.bind(this)}
                    >
                        {
                            isSend ? `${getLabel('507764', '获取验证码')}` : `${getLabel('507765', '重新发送')}(${this.state.count})`
                        }
                    </Button>
                </div>
            </div>

        )
    }
}
